<template>
  <div class="vue-container">
    <el-dialog
      ref="maxDialog"
      v-drag
      :title="ruleForm.id ? '编辑黑名单': '加入黑名单'"
      :visible.sync="dialogVisible"
      width="450px"
      @closed="closedDialog"
    >
      <el-form
        ref="reform"
        v-loading="loading"
        :model="ruleForm"
        status-icon
        :rules="rules"
        :size="size"
        label-width="90px"
        :show-message="showMessage"
      >
        <el-form-item label="拉黑类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio
              v-for="(item, index) in typeList"
              :key="index"
              :disabled="ruleForm.disabledType"
              :label="Number(item.code)"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="ruleForm.type === 1" label="拉黑账号" prop="username">
          <el-input v-model="ruleForm.username" :disabled="ruleForm.disabledData" />
        </el-form-item>
        <el-form-item v-if="ruleForm.type === 2" label="拉黑IP" prop="ip">
          <el-input v-model="ruleForm.ip" :disabled="ruleForm.disabledData" />
        </el-form-item>
        <el-form-item label="永久拉黑" prop="isPermanent">
          <el-checkbox v-model="ruleForm.isPermanent" />
        </el-form-item>
        <el-form-item v-if="!ruleForm.isPermanent" label="结束时间" prop="endTime">
          <el-date-picker
            v-model="ruleForm.endTime"
            style="width: 100%;"
            type="datetime"
            :picker-options="pickerOptions"
            value-format="timestamp"
            placeholder="选择拉黑结束时间"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">取消</el-button>
        <el-button v-throttle :size="size" :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { create, edit } from '@/api/ops/blacklist'
import { validIpv4 } from '@/utils/validate'
export default {
  name: 'AddToBlacklist',
  data() {
    return {
      loading: false, // 加载开关
      dialogVisible: false, //  弹窗
      showMessage: false, // 是否显示校验信息
      typeList: [], // 拉黑类型数组
      ruleForm: { }, //  表单
      rules: { // 表单校验
        type: [
          { required: true, message: '请选择拉黑类型', trigger: 'blur' }
        ],
        ip: [
          { required: true, message: '请输入拉黑IP', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入拉黑账号', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '请选择拉黑结束时间', trigger: 'blur' }
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      }
    }
  },
  computed: {
    // 页面布局大小
    size() {
      return this.$store.state.app.size
    }
  },
  async created() {
    this.typeList = await this.getDictInfo('blacklist_type')
  },
  methods: {
    // 弹出窗口加载
    openDialog(row) {
      if (row) {
        this.ruleForm = {
          disabledType: row.disabledType ? row.disabledType : false,
          disabledData: row.disabledData ? row.disabledData : false,
          id: row.id,
          type: row.type,
          ip: row.ip ? row.ip : row.relevanceData,
          username: row.username ? row.username : row.relevanceData,
          isPermanent: row.endTime === 0,
          endTime: row.endTime === 0 ? null : row.endTime
        }
      } else {
        this.ruleForm = {
          disabledType: false,
          disabledData: false,
          type: 2,
          isPermanent: false
        }
      }
      this.dialogVisible = true
    },
    // 保存
    submitForm() {
      this.$refs['reform'].validate((valid, obj) => {
        if (valid) {
          if (this.ruleForm.endTime !== 0 && this.ruleForm.endTime < new Date().getTime()) {
            this.$message.error('拉黑结束时间不能小于当前时间')
            return
          }
          if (this.ruleForm.type === 2) {
            this.ruleForm.relevanceData = this.ruleForm.ip
            const isIpv4 = validIpv4(this.ruleForm.relevanceData)
            if (!isIpv4) {
              this.$message.error('IP格式不正确')
              return
            }
          } else {
            this.ruleForm.relevanceData = this.ruleForm.username
          }
          if (this.ruleForm.isPermanent) {
            this.ruleForm.endTime = 0
          }
          this.loading = true
          const save = this.ruleForm.id ? edit : create
          save(this.ruleForm).then((res) => {
            this.$message({ message: '操作成功', type: 'success' })
            // 针对保存方法成功后子组件向父组件传达信号
            this.$emit('ok', this.ruleForm)
            this.dialogVisible = false
          }).finally(() => {
            this.loading = false
          })
        } else {
          const field = []
          for (const key in obj) {
            field.push(obj[key][0].message)
          }
          this.$message.error(field[0])
          return false
        }
      })
    },
    // 弹窗关闭动画结束触发
    closedDialog() {
      // 表单校验重置
      this.ruleForm = {}
      if (this.$refs.reform) this.$refs.reform.resetFields()
    }
  }
}
</script>
